<template>
  <div>
    <a-form :form="form" class="form">
      <a-card
        :bordered="false"
        :loading="crmRoleList.loading"
        :title="pid == 0 ? '部门添加' : `${title}-子部门添加`"
      >
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="部门名称">
              <a-input
                type="textarea"
                placeholder="请输入部门名称"
                v-decorator="[
                  'name',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入部门名称',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="选择CRM权限">
              <a-select
                :showSearch="true"
                optionFilterProp="label"
                allowClear
                placeholder="请选择CRM权限"
                v-decorator="[
                  'crm_role_id',
                  {
                     rules: [
                      {
                        required: true,
                        message: '请选择CRM权限',
                      },
                    ],
                    initialValue: undefined,
                  },
                ]"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in crmRoleList.data"
                  :key="index"
                  :label="item.name"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="排序(纯数字,越大越往前显示)">
              <a-input
                placeholder="请输入排序"
                v-decorator="[
                  'sort',
                  {
                    rules: [{ validator: checkNumber }],
                    initialValue: 0,
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="状态">
              <a-switch
                checked-children="启用"
                un-checked-children="禁用"
                v-decorator="[
                  'status',
                  { valuePropName: 'checked', initialValue: true },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="部门负责人">
              <a-input
                type="textarea"
                placeholder="请输入部门负责人"
                v-decorator="[
                  'principal',
                  {
                    rules: [{ max: 255, message: '不得超过255个字符' }],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <div class="submit">
          <a-button
            type="primary"
            @click="validate"
            :loading="loading2 || loading"
            >提交</a-button
          >
        </div>
      </a-card>
    </a-form>
  </div>
</template>

<script>
// import {
//   adminRoleList,
//   adminAdd,
//   adminAvatar,
// } from "@/services/admin";
import { divisionAdd, divisionSelOne } from "@/services/division";
import { crmRoleSelectList } from "@/services/crmRole";

export default {
  name: "AdminAdd",
  components: {},
  data() {
    return {
      form: this.$form.createForm(this),
      loading2: false,
      pid: 0,
      title: "",
      chain: 0,
      loading: false,
      crmRoleList: {
        data: [],
        loading: false,
      },
    };
  },
  async created() {
    this.pid = this.$route.query.pid ? this.$route.query.pid : 0;
    this.title = this.$route.query.name;
    this.crmRoleSelectListLoad();

    // this.loading = true;
    // if (this.pid != 0) {
    //   let res = await divisionSelOne({ id: this.pid });
    //   if (res.code == 200) {
    //     this.chain = `${res.data.chain},${res.data.id}`;
    //   }
    // } else {
    //   this.chain = 0;
    // }
    // this.loading = false;
    // console.log(this.chain)
    // console.log( this.loading)
    // console.log( this.loading2)
  },
  watch: {
    "$route.query.pid": function () {
      let pid = this.$route.query.pid ? this.$route.query.pid : 0;
      // this.title = this.$route.query.name
      if (this.pid != pid) {
        this.pid = pid;
      }
      //重新调用请求数据的方法，刷新页面数据
    },
    async pid() {
      this.title = this.$route.query.name;
      this.loading = true;
      // console.log(this.pid)
      if (this.pid != 0) {
        let res = await divisionSelOne({ id: this.pid });
        if (res.code == 200) {
          this.chain = `${res.data.chain},${res.data.id}`;
        }
      } else {
        this.chain = 0;
      }
      this.loading = false;
    },
  },
  methods: {
    async crmRoleSelectListLoad() {
      this.crmRoleList.loading = true;
      let res = await crmRoleSelectList();
      if (res.code == 200) {
        const { list } = res.data;
        this.crmRoleList.data = list;
      }
      //  this.crmRoleList.data.unshift({'id':0,'name':'超级管理员(拥有所有权限)'})
      this.crmRoleList.loading = false;
    },
    async validate() {
      const { form, $message, $refs, $router } = this;
      this.form.validateFields((err) => {
        if (err) {
          this.$message.error("信息填写有误");
          return;
        } else {
          // console.log(form.getFieldsValue());
          let this_ = this;
          this.$confirm({
            title: "确定要添加吗?",
            // content: h => <div style="color:red;">Some descriptions</div>,
            async onOk() {
              this_.loading2 = true;

              let formData = form.getFieldsValue();
              formData["pid"] = this_.pid;
              formData["chain"] = this_.chain;

              let res = await divisionAdd({ formData });
              if (res.code == 200) {
                $message.success(res.message);
                this_.closeTabs.$emit("closeTabs");
                $router.push("/crmManagement/divisionManagement");
              }
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    // display: flex;
    // justify-content: space-between;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
.topRow button {
  margin-top: 5px;
  margin-left: 10px;
}
.submit {
  width: 100%;
  display: flex;
  justify-content: center;
}
.portraitImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
}

#portraitImage {
  //   width: 100%;
  //   height: 100%;
}

.portraitShow {
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  border: 1px dashed #ced0d3;
  // margin-left: 20px;
  position: relative;
  margin: auto;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  cursor: pointer;
}
.plus-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
